<template>
  <div class="appointments">
    <!-- 顶部标题 -->
    <header class="page-header">
      <div class="header-content">
        <button @click="goBack" class="back-button">
          <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">律师预约</h1>
        <button @click="showCalendar = !showCalendar" class="calendar-toggle">
          <i class="fas fa-calendar-alt"></i>
        </button>
      </div>
    </header>

    <!-- 筛选标签 -->
    <div class="filter-tabs">
      <button 
        v-for="tab in filterTabs" 
        :key="tab.key"
        @click="activeFilter = tab.key"
        :class="['filter-tab', { active: activeFilter === tab.key }]"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 我的预约 -->
    <div v-if="activeFilter === 'my-appointments'" class="my-appointments">
      <div class="appointment-list">
        <div 
          v-for="appointment in myAppointments" 
          :key="appointment.id"
          :class="['appointment-item', appointment.status]"
        >
          <div class="appointment-time">
            <div class="date">{{ formatDate(appointment.date) }}</div>
            <div class="time">{{ appointment.time }}</div>
          </div>
          
          <div class="appointment-info">
            <div class="lawyer-info">
              <img :src="appointment.lawyer.avatar" :alt="appointment.lawyer.name" class="lawyer-avatar">
              <div class="lawyer-details">
                <div class="lawyer-name">{{ appointment.lawyer.name }}</div>
                <div class="lawyer-title">{{ appointment.lawyer.title }}</div>
              </div>
            </div>
            
            <div class="appointment-details">
              <div class="consultation-type">{{ appointment.type }}</div>
              <div class="consultation-topic">{{ appointment.topic }}</div>
            </div>
          </div>
          
          <div class="appointment-actions">
            <div :class="['status-badge', appointment.status]">
              {{ getStatusText(appointment.status) }}
            </div>
            <div class="action-buttons">
              <button 
                v-if="appointment.status === 'confirmed'" 
                @click="joinConsultation(appointment)"
                class="join-btn"
              >
                进入咨询
              </button>
              <button 
                v-if="appointment.status === 'pending'" 
                @click="cancelAppointment(appointment.id)"
                class="cancel-btn"
              >
                取消预约
              </button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="myAppointments.length === 0" class="empty-state">
          <div class="empty-icon">
            <i class="fas fa-calendar-times"></i>
          </div>
          <h3>暂无预约</h3>
          <p>您还没有预约任何律师咨询</p>
          <button @click="activeFilter = 'book-appointment'" class="empty-action-btn">
            立即预约
          </button>
        </div>
      </div>
    </div>

    <!-- 预约律师 -->
    <div v-if="activeFilter === 'book-appointment'" class="book-appointment">
      <!-- 专业领域筛选 -->
      <div class="specialty-filter">
        <h3>选择专业领域</h3>
        <div class="specialty-tags">
          <button 
            v-for="specialty in specialties" 
            :key="specialty.id"
            @click="selectedSpecialty = specialty.id"
            :class="['specialty-tag', { active: selectedSpecialty === specialty.id }]"
          >
            {{ specialty.name }}
          </button>
        </div>
      </div>

      <!-- 律师列表 -->
      <div class="lawyer-list">
        <div 
          v-for="lawyer in filteredLawyers" 
          :key="lawyer.id"
          class="lawyer-card"
          @click="selectLawyer(lawyer)"
        >
          <div class="lawyer-header">
            <img :src="lawyer.avatar" :alt="lawyer.name" class="lawyer-avatar">
            <div class="lawyer-info">
              <div class="lawyer-name">{{ lawyer.name }}</div>
              <div class="lawyer-title">{{ lawyer.title }}</div>
              <div class="lawyer-experience">{{ lawyer.experience }}年经验</div>
            </div>
            <div class="lawyer-rating">
              <div class="stars">
                <i v-for="i in 5" :key="i" :class="['fas fa-star', { filled: i <= lawyer.rating }]"></i>
              </div>
              <div class="rating-text">{{ lawyer.rating }}.0</div>
            </div>
          </div>
          
          <div class="lawyer-specialties">
            <span v-for="spec in lawyer.specialties" :key="spec" class="specialty-badge">
              {{ spec }}
            </span>
          </div>
          
          <div class="lawyer-description">
            {{ lawyer.description }}
          </div>
          
          <div class="lawyer-footer">
            <div class="consultation-fee">
              <span class="fee-label">咨询费用:</span>
              <span class="fee-amount">¥{{ lawyer.consultationFee }}/小时</span>
            </div>
            <button class="book-btn">
              立即预约
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 预约弹窗 -->
    <div v-if="showBookingModal" class="booking-modal" @click="closeBookingModal">
      <div class="booking-content" @click.stop>
        <div class="booking-header">
          <h3>预约 {{ selectedLawyer?.name }}</h3>
          <button @click="closeBookingModal" class="close-button">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="booking-form">
          <!-- 咨询类型 -->
          <div class="form-group">
            <label>咨询类型</label>
            <div class="consultation-types">
              <button 
                v-for="type in consultationTypes" 
                :key="type.id"
                @click="bookingForm.type = type.id"
                :class="['type-btn', { active: bookingForm.type === type.id }]"
              >
                <i :class="type.icon"></i>
                <span>{{ type.name }}</span>
                <small>{{ type.description }}</small>
              </button>
            </div>
          </div>
          
          <!-- 预约日期 -->
          <div class="form-group">
            <label>选择日期</label>
            <div class="date-picker">
              <button 
                v-for="date in availableDates" 
                :key="date.date"
                @click="bookingForm.date = date.date"
                :class="['date-btn', { active: bookingForm.date === date.date, disabled: !date.available }]"
                :disabled="!date.available"
              >
                <div class="date-day">{{ date.day }}</div>
                <div class="date-date">{{ date.dateStr }}</div>
              </button>
            </div>
          </div>
          
          <!-- 预约时间 -->
          <div class="form-group" v-if="bookingForm.date">
            <label>选择时间</label>
            <div class="time-slots">
              <button 
                v-for="time in availableTimeSlots" 
                :key="time.time"
                @click="bookingForm.time = time.time"
                :class="['time-btn', { active: bookingForm.time === time.time, disabled: !time.available }]"
                :disabled="!time.available"
              >
                {{ time.time }}
              </button>
            </div>
          </div>
          
          <!-- 咨询主题 -->
          <div class="form-group">
            <label>咨询主题</label>
            <input 
              v-model="bookingForm.topic" 
              type="text" 
              placeholder="请简要描述您的法律问题"
              class="topic-input"
            >
          </div>
          
          <!-- 详细描述 -->
          <div class="form-group">
            <label>详细描述（可选）</label>
            <textarea 
              v-model="bookingForm.description" 
              placeholder="请详细描述您的情况，以便律师更好地为您准备"
              class="description-input"
              rows="4"
            ></textarea>
          </div>
        </div>
        
        <div class="booking-footer">
          <div class="booking-summary">
            <div class="fee-info">
              <span>咨询费用: ¥{{ selectedLawyer?.consultationFee }}/小时</span>
            </div>
          </div>
          <div class="booking-actions">
            <button @click="closeBookingModal" class="cancel-btn">取消</button>
            <button @click="confirmBooking" class="confirm-btn" :disabled="!isBookingFormValid">
              确认预约
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

export default {
  name: 'ClientAppointments',
  setup() {
    const router = useRouter()
    const activeFilter = ref('my-appointments')
    const showCalendar = ref(false)
    const showBookingModal = ref(false)
    const selectedLawyer = ref(null)
    const selectedSpecialty = ref(null)
    
    // 筛选标签
    const filterTabs = ref([
      { key: 'my-appointments', name: '我的预约' },
      { key: 'book-appointment', name: '预约律师' }
    ])
    
    // 交通事故相关专业领域
    const specialties = ref([
      { id: null, name: '全部' },
      { id: 'traffic', name: '交通事故' },
      { id: 'insurance', name: '保险理赔' },
      { id: 'personal-injury', name: '人身损害' },
      { id: 'medical-malpractice', name: '医疗纠纷' },
      { id: 'civil', name: '民事纠纷' },
      { id: 'criminal', name: '刑事辩护' }
    ])
    
    // 咨询类型
    const consultationTypes = ref([
      {
        id: 'video',
        name: '视频咨询',
        description: '面对面在线交流',
        icon: 'fas fa-video'
      },
      {
        id: 'phone',
        name: '电话咨询',
        description: '电话沟通交流',
        icon: 'fas fa-phone'
      },
      {
        id: 'offline',
        name: '线下面谈',
        description: '律师事务所会面',
        icon: 'fas fa-handshake'
      }
    ])
    
    // 交通事故案件预约数据
    const myAppointments = ref([
      {
        id: 1,
        date: '2024-02-20',
        time: '14:00-15:00',
        type: '视频咨询',
        topic: '交通事故伤残鉴定结果咨询',
        status: 'confirmed',
        lawyer: {
          name: '李卫民律师',
          title: '交通事故专业律师',
          avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
        }
      },
      {
        id: 2,
        date: '2024-02-22',
        time: '10:00-11:00',
        type: '线下面谈',
        topic: '保险理赔方案讨论',
        status: 'pending',
        lawyer: {
          name: '王志强律师',
          title: '保险理赔专家',
          avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'
        }
      },
      {
        id: 3,
        date: '2024-02-18',
        time: '16:00-17:00',
        type: '电话咨询',
        topic: '后续治疗费用认定',
        status: 'completed',
        lawyer: {
          name: '张医法律师',
          title: '医疗损害专家',
          avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b1ab?w=100&h=100&fit=crop&crop=face'
        }
      }
    ])
    
    // 交通事故专业律师列表
    const lawyers = ref([
      {
        id: 1,
        name: '李卫民',
        title: '交通事故专业律师',
        experience: 15,
        rating: 5,
        specialties: ['交通事故', '人身损害', '保险理赔'],
        description: '专注交通事故处理15年，成功代理各类交通事故案件500+起，擅长伤残鉴定和赔偿谈判。',
        consultationFee: 800,
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
        category: 'traffic'
      },
      {
        id: 2,
        name: '王志强',
        title: '保险理赔专家',
        experience: 12,
        rating: 5,
        specialties: ['保险理赔', '车辆损失评估', '代理诉讼'],
        description: '前保险公司法务总监，精通各类保险条款，成功为客户争取到合理赔偿。',
        consultationFee: 600,
        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
        category: 'insurance'
      },
      {
        id: 3,
        name: '张医法',
        title: '医疗损害赔偿律师',
        experience: 18,
        rating: 5,
        specialties: ['医疗损害', '伤残鉴定', '康复费用'],
        description: '医学法学双学位，专业处理人身损害赔偿，对医疗费用认定有独到见解。',
        consultationFee: 700,
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b1ab?w=100&h=100&fit=crop&crop=face',
        category: 'personal-injury'
      },
      {
        id: 4,
        name: '陈晓丽',
        title: '交通肇事刑辩律师',
        experience: 10,
        rating: 4,
        specialties: ['交通肇事罪', '危险驾驶罪', '刑事辩护'],
        description: '专注交通肇事刑事案件，为当事人提供专业的刑事辩护服务。',
        consultationFee: 500,
        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
        category: 'criminal'
      },
      {
        id: 5,
        name: '刘建国',
        title: '资深交通律师',
        experience: 20,
        rating: 5,
        specialties: ['重大交通事故', '群体性事故', '司法鉴定'],
        description: '二十年交通事故处理经验，处理过多起重大交通事故案件，业内知名专家。',
        consultationFee: 1000,
        avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face',
        category: 'traffic'
      },
      {
        id: 6,
        name: '赵美华',
        title: '人身损害赔偿律师',
        experience: 8,
        rating: 4,
        specialties: ['人身损害', '精神损害', '护理费认定'],
        description: '年轻有为的女律师，专业细致，善于从受害者角度争取最大权益。',
        consultationFee: 400,
        avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face',
        category: 'personal-injury'
      }
    ])
    
    // 预约表单
    const bookingForm = ref({
      type: null,
      date: null,
      time: null,
      topic: '',
      description: ''
    })
    
    // 过滤后的律师列表
    const filteredLawyers = computed(() => {
      if (!selectedSpecialty.value) {
        return lawyers.value
      }
      return lawyers.value.filter(lawyer => lawyer.category === selectedSpecialty.value)
    })
    
    // 可预约日期
    const availableDates = computed(() => {
      const dates = []
      for (let i = 1; i < 8; i++) {
        const date = dayjs().add(i, 'day')
        dates.push({
          date: date.format('YYYY-MM-DD'),
          day: date.format('dddd'),
          dateStr: date.format('MM/DD'),
          available: true
        })
      }
      return dates
    })
    
    // 可预约时间段
    const availableTimeSlots = computed(() => {
      if (!bookingForm.value.date) return []
      
      return [
        { time: '09:00', available: true },
        { time: '10:00', available: true },
        { time: '11:00', available: false },
        { time: '14:00', available: true },
        { time: '15:00', available: true },
        { time: '16:00', available: true },
        { time: '17:00', available: false }
      ]
    })
    
    // 预约表单验证
    const isBookingFormValid = computed(() => {
      return bookingForm.value.type && 
             bookingForm.value.date && 
             bookingForm.value.time && 
             bookingForm.value.topic.trim()
    })
    
    // 格式化日期
    const formatDate = (dateStr) => {
      return dayjs(dateStr).format('MM月DD日')
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        pending: '待确认',
        confirmed: '已确认',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || status
    }
    
    // 选择律师
    const selectLawyer = (lawyer) => {
      selectedLawyer.value = lawyer
      showBookingModal.value = true
      // 重置表单
      bookingForm.value = {
        type: null,
        date: null,
        time: null,
        topic: '',
        description: ''
      }
    }
    
    // 关闭预约弹窗
    const closeBookingModal = () => {
      showBookingModal.value = false
      selectedLawyer.value = null
    }
    
    // 确认预约
    const confirmBooking = () => {
      if (!isBookingFormValid.value) return
      
      // 这里应该调用API提交预约
      alert('预约提交成功！律师将在24小时内确认您的预约。')
      closeBookingModal()
    }
    
    // 取消预约
    const cancelAppointment = (appointmentId) => {
      if (confirm('确定要取消这个预约吗？')) {
        const index = myAppointments.value.findIndex(a => a.id === appointmentId)
        if (index > -1) {
          myAppointments.value[index].status = 'cancelled'
        }
      }
    }
    
    // 进入咨询
    const joinConsultation = (appointment) => {
      alert('正在为您启动咨询会议...')
    }
    
    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }
    
    return {
      activeFilter,
      showCalendar,
      showBookingModal,
      selectedLawyer,
      selectedSpecialty,
      filterTabs,
      specialties,
      consultationTypes,
      myAppointments,
      lawyers,
      bookingForm,
      filteredLawyers,
      availableDates,
      availableTimeSlots,
      isBookingFormValid,
      formatDate,
      getStatusText,
      selectLawyer,
      closeBookingModal,
      confirmBooking,
      cancelAppointment,
      joinConsultation,
      goBack
    }
  }
}
</script>

<style scoped>
.appointments {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.back-button, .calendar-toggle {
  background: none;
  border: none;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  padding: 8px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background: white;
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-tab {
  background: none;
  border: none;
  padding: 16px 0;
  margin-right: 24px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.filter-tab.active {
  color: #3b82f6;
  font-weight: 600;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
}

/* 我的预约 */
.my-appointments {
  padding: 20px;
}

.appointment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.appointment-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 16px;
}

.appointment-time {
  flex-shrink: 0;
  text-align: center;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  min-width: 80px;
}

.appointment-time .date {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.appointment-time .time {
  font-size: 12px;
  color: #374151;
  font-weight: 600;
}

.appointment-info {
  flex: 1;
}

.lawyer-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.lawyer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.lawyer-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.lawyer-title {
  font-size: 12px;
  color: #6b7280;
}

.appointment-details .consultation-type {
  font-size: 12px;
  color: #3b82f6;
  margin-bottom: 4px;
}

.appointment-details .consultation-topic {
  font-size: 14px;
  color: #374151;
}

.appointment-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.pending {
  background: #fef3c7;
  color: #d97706;
}

.status-badge.confirmed {
  background: #dcfce7;
  color: #16a34a;
}

.status-badge.completed {
  background: #e0e7ff;
  color: #4f46e5;
}

.status-badge.cancelled {
  background: #fee2e2;
  color: #dc2626;
}

.join-btn, .cancel-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  cursor: pointer;
}

.join-btn {
  background: #3b82f6;
  color: white;
}

.cancel-btn {
  background: #f3f4f6;
  color: #6b7280;
}

/* 预约律师 */
.book-appointment {
  padding: 20px;
}

.specialty-filter {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.specialty-filter h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.specialty-tag {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: white;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.specialty-tag.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.lawyer-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lawyer-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.lawyer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lawyer-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.lawyer-info {
  flex: 1;
  margin-right: 16px;
}

.lawyer-name {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.lawyer-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 2px;
}

.lawyer-experience {
  font-size: 12px;
  color: #9ca3af;
}

.lawyer-rating {
  text-align: right;
}

.stars {
  margin-bottom: 4px;
}

.stars i {
  color: #d1d5db;
  font-size: 12px;
}

.stars i.filled {
  color: #fbbf24;
}

.rating-text {
  font-size: 12px;
  color: #6b7280;
}

.lawyer-specialties {
  margin-bottom: 12px;
}

.specialty-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 8px;
  margin-bottom: 4px;
}

.lawyer-description {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 16px;
}

.lawyer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.consultation-fee .fee-label {
  font-size: 12px;
  color: #9ca3af;
}

.consultation-fee .fee-amount {
  font-size: 16px;
  font-weight: 600;
  color: #dc2626;
  margin-left: 8px;
}

.book-btn {
  padding: 8px 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* 预约弹窗 */
.booking-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.booking-content {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.booking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.booking-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 18px;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
}

.booking-form {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

.consultation-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.type-btn {
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.type-btn.active {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.type-btn i {
  font-size: 24px;
  color: #6b7280;
  margin-bottom: 8px;
  display: block;
}

.type-btn.active i {
  color: #3b82f6;
}

.type-btn span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.type-btn small {
  font-size: 12px;
  color: #6b7280;
}

.date-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.date-btn {
  flex-shrink: 0;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  text-align: center;
  min-width: 80px;
  transition: all 0.2s ease;
}

.date-btn.active {
  border-color: #3b82f6;
  background: #f0f9ff;
}

.date-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.date-day {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.date-date {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.time-btn {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.time-btn.active {
  border-color: #3b82f6;
  background: #f0f9ff;
  color: #3b82f6;
}

.time-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.topic-input, .description-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
}

.topic-input:focus, .description-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.booking-footer {
  padding: 24px;
  border-top: 1px solid #f3f4f6;
}

.booking-summary {
  margin-bottom: 16px;
  text-align: center;
}

.fee-info {
  font-size: 14px;
  color: #6b7280;
}

.booking-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.booking-actions .cancel-btn,
.booking-actions .confirm-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.booking-actions .cancel-btn {
  background: #f3f4f6;
  border: none;
  color: #6b7280;
}

.booking-actions .confirm-btn {
  background: #3b82f6;
  border: none;
  color: white;
}

.booking-actions .confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}

.empty-state p {
  font-size: 14px;
  margin-bottom: 24px;
}

.empty-action-btn {
  padding: 12px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .appointment-item {
    flex-direction: column;
    gap: 12px;
  }
  
  .appointment-time {
    align-self: flex-start;
  }
  
  .consultation-types {
    grid-template-columns: 1fr;
  }
  
  .date-picker {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .appointments {
    padding: 0;
  }
  
  .my-appointments,
  .book-appointment {
    padding: 16px;
  }
  
  .booking-modal {
    padding: 16px;
  }
  
  .booking-header {
    padding: 20px 20px 0;
  }
  
  .booking-form {
    padding: 20px;
  }
  
  .booking-footer {
    padding: 20px;
  }
}
</style>